<template>
客户管理 - 客户列表
<div style="width: 90%; height: 100%; background-color:silver;">
  &nbsp;
  <div style="display: flex; justify-content: center;">
      <el-card style="width: 1200px;height: 90px;" shadow="always">
      <el-input v-model="Cliendata.cardNo" placeholder="请输入关键词"  style="width: 200px;"/>
      <el-input v-model="Cliendata.clienName" placeholder="请输入关键词"  style="width: 200px;"/>
      <el-input v-model="Cliendata.clienPhone" placeholder="请输入关键词"  style="width: 200px;"/>
      <br/>
      <el-button @click="GetClienShow">Q</el-button>
      <el-button @click="">导出会员数据</el-button>
      <el-button @click="">打标签</el-button>
      <el-button @click="">修改等级</el-button>
      <el-button @click="">冻结</el-button>
      <el-button @click="">解冻</el-button>
      <el-button @click="dialogFormVisible = true">添加客户</el-button>
      <el-button @click="">导入客户</el-button>
    </el-card>
  </div>
  &nbsp;
    <div style="display: flex; justify-content: center;width: 100%;height: 100%;">
      <el-card style="width: 1200px;height: 620px;" shadow="always">
  <el-table :data="ClienShow" style="width: 100%;height: 540px;">
    <el-table-column type="selection" width="55" />
    <el-table-column  prop="clienId" label="客户信息"  />
    <el-table-column prop="clienName" label="身份等级" />
    <el-table-column prop="clienPhone" label="标签"  />
    <el-table-column prop="cardNo" label="卡号" />
    <el-table-column prop="clienGrow" label="手机"  />
    <el-table-column prop="clienRealcharge" label="可用余额" />
    <el-table-column prop="clienGive" label="可用积分"  />
    <el-table-column prop="clienIntegral" label="累计消费金额" />
    <el-table-column prop="clienSex" label="累计退款金额"  />
    <el-table-column prop="clienBirthday" label="累计维权次数" />
    <el-table-column prop="clienAddr" label="累计维权次数" />
    <el-table-column prop="clienFreeze" label="累计维权次数" />
    <el-table-column  label="累计维权次数" >
      <template #default="{row}">
        <el-button type="text">详情级</el-button>
        <el-button type="text">冻结</el-button>
        <el-button type="text">送积分</el-button>
        <el-button type="text">设等级</el-button>
        <el-button type="text">送优惠卷</el-button>
        <el-button type="text">充值</el-button>
        <el-button type="text">消费</el-button>
      </template>
    </el-table-column>

  </el-table>
    </el-card>
    </div>
</div>
<!-- 添加弹出层 -->
<el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="ClientAdd">
      <el-form-item label="客户类型"> 
      <el-radio-group v-model="ClientAdd.clienId">
        <el-radio value="1">会员</el-radio>
        <el-radio value="2">普通会员</el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="客户姓名">
      <el-input v-model="ClientAdd.clienName" />
      </el-form-item>
      <el-form-item label="手机号码">
      <el-input v-model="ClientAdd.clienPhone" />
      </el-form-item>
      <el-form-item label="成长值">
      <el-input v-model="ClientAdd.clienGrow" />
      </el-form-item>
      <el-form-item label="可用实充余额">
      <el-input v-model="ClientAdd.clienRealcharge" />
      </el-form-item>
      <el-form-item label="可用赠送余额">
      <el-input v-model="ClientAdd.clienGive" />
      </el-form-item>
      <el-form-item label="可用积分">
      <el-input v-model="ClientAdd.clienIntegral" />
      </el-form-item>
      <el-form-item label="卡号">
      <el-input v-model="ClientAdd.cardNo" />
      </el-form-item>
      <el-form-item label="性别">
      <el-select v-model="ClientAdd.clienSex" placeholder="请选择">
        <el-option label="男" value="true" />
        <el-option label="女" value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="生日">
        <el-date-picker
          v-model="ClientAdd.clienBirthday"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
        />
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="ClientAdd.clienAddr" type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="GetClienadd()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>

import { ref,reactive,onMounted, resolveDynamicComponent } from 'vue';
import axios from 'axios'
import { ElMessage } from 'element-plus';
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

//客户显示
//#region 
const ClienShow=ref([]);
const Cliendata=reactive({
  clienName:'',
  clienPhone:'',
  cardNo:''
})
const GetClienShow=()=>{
  axios.get("https://localhost:44392/ClienShow",{
    params:{
      clienName:Cliendata.clienName,
      clienPhone:Cliendata.clienPhone,
      clientNo:Cliendata.cardNo
    }
  }).then(res=>{
    ClienShow.value=res.data.data
  })
}
//#endregion

//客户添加
//#region 
const ClientAdd=reactive({
  clienId: 0,
  clienName: "",
  clienPhone: "",
  cardNo: "",
  clienGrow: "",
  clienRealcharge: "",
  clienGive: "",
  clienIntegral: "",
  clienSex: true,
  clienBirthday: "",
  clienAddr: "",
  clienFreeze: true
})
const GetClienadd=()=>{
  axios.post("https://localhost:44392/ClientAdd",ClientAdd).then(res=>{
    if(res.data.code==200){
        ElMessage.success(res.data.msg);
        return;
    }
    else
    {
      ElMessage.error(res.data.msg);
    }
  })
}
//#endregion

onMounted(()=>{
  GetClienShow();
})
</script>